<script setup lang="ts">
import { setDeclare } from "@/api/setting";
import { getUserInfo } from "@/api/user";
import { useTheme } from "@/composables/useTheme";
import { Tips, uploadImageTwo } from "@/utils";
import Cache from "@/utils/cache";
import { USER_INFO } from "@/config/cache";
import saveUserInfoToLocation from "@/composables/saveUserInfoToLocation"
import { onLoad, onReady, onShow } from "@dcloudio/uni-app";
import { hidePageNavInWechatBrowser } from "@/composables/useHiddenNavbar";
import hideWechatMenu from "@/composables/hideWechatMenu";
onReady(() => {
  hidePageNavInWechatBrowser();
});
let declare_content = ref("");
onShow(() => {
    hideWechatMenu();
  try {
    const dataInfo = JSON.parse(Cache.get(USER_INFO));
    if (dataInfo.declare_images) imgList.value = dataInfo.declare_images;

    declare_content.value = dataInfo.declare_content;
  } catch (error) {}
});
const { colorStyle } = useTheme();

let imgList = ref([]);
const uploadOpt = {
  count: 2,
};
function upLogoHandler() {
  uploadImageTwo(uploadOpt, (res: any) => {
    if (imgList.value.length < uploadOpt.count) {
      let data = res.data;
      imgList.value.push(data.url);
      console.log(res, "res");
    } else {
      Tips({ title: "最多上传" + uploadOpt.count + "张图片" });
    }
  });
}
function delImgHandler(index) {
  imgList.value.splice(index, 1);
}
function handleCrop(e: any) {
  uni.previewImage({
    urls: [e.tempFilePath],
    current: 0,
  });
}
function submitHanler() {
  const params = {
    declare_images: imgList.value.join(","),
    declare_content: declare_content.value,
  };
  setDeclare(params).then((res: any) => {
    saveUserInfoToLocation(res.data.business)
    Tips(
      {
        title: res.info,
      },
      { tab: 3 }
    );
  });
}
</script>
<template>
  <view class="wrap" :style="colorStyle">
    <view class="card_box">
      <view class="image_box flex_s">
        <template v-if="imgList.length">
          <view
            class="image_item"
            v-for="(item, index) in imgList"
            :key="index"
          >
            <text
              class="del_class iconfont icon-guanbi1"
              @click="delImgHandler(index)"
            ></text>
            <image :src="item" mode="aspectFill"></image>
          </view>
        </template>

        <view class="image_item flex_c" @click="upLogoHandler">
          <text class="iconfont icon-tupian1"></text>
        </view>
      </view>
    </view>
    <view class="card_box item_box">
      <view class="title">声明内容</view>
      <view class="textarea_box">
        <textarea
          class="textarea_class"
          placeholder-class="placeholder_class"
          placeholder="请输入声明详细内容"
          v-model="declare_content"
        ></textarea>
      </view>
    </view>
    <view class="theme_btn" @click="submitHanler"> 确认设置 </view>
  </view>
</template>

<style scoped lang="scss">
.wrap {
  .card_box {
    background: #fff;
    padding: 20rpx 30rpx;
    margin-bottom: 2rpx;
    .image_box {
      flex-wrap: wrap;
      .iconfont {
        color: #d6ddde;
        font-size: 50rpx;
      }
      .image_item {
        flex-shrink: 0;
        position: relative;
        width: 188rpx;
        height: 188rpx;
        border-radius: 10rpx;
        overflow: hidden;
        background: rgba(248, 248, 248, 1);
        margin-bottom: 10rpx;
        &:not(:last-child) {
          margin-right: 8rpx;
        }
        .del_class {
          position: absolute;
          z-index: 10;
          font-size: 40rpx;
          color: #1c1c1d;
          right: 5rpx;
          top: 5rpx;
        }
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .item_box {
    padding: 20rpx 30rpx;
    font-size: 26rpx;
    margin-bottom: 50rpx;
    .title {
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      color: rgba(125, 136, 140, 1);
    }
    .textarea_box {
      .textarea_class {
        min-height: 100rpx;
        width: 100%;
      }
      textarea {
        font-size: 26rpx;
      }
      //   .placeholder_class {
      //     color: #ccc;
      //     font-size: 26rpx;
      //   }
    }
  }
}
</style>
